
import React from 'react';
import { Empty } from 'antd';
import cass from 'classnames';
import TaskItem from '../../../components/TaskItem';
import MemberList from '../../../components/MemberList';
import s from './index.module.less';

const emptyText = '';

/**
 * 
 * @param {col} description 默认是一列布局，可以不传，不传和传的值不等于都是默认一列布局，只有col=2才是两列布局
 */

function renderEmpty(description) {
    return <div className={s.empty}><Empty description={description} /></div>
}

function renderInfoItem({ currentStage = {}, infoField, col }) {
    const info = currentStage.info;
    if (!infoField.length || !info) return null;
    return (
        <div className={cass(s.info)}>
            {
                infoField.map(v => {
                    let text;
                    const key = v.fieldname;
                    if (key === 'client' || key === 'litigant') {
                        text = info[key].map(v => v.name).join(', ') || emptyText;
                    } else if (key === 'fullcourt' || key === 'clerk') {
                        text = info[key].map(v => v.name && v.phone ? `${v.name} | ${v.phone}` : '').join(', ') || emptyText;
                    } else if (key === 'remarks') {
                        text = info[key].map(v => v.content).join(', ') || emptyText;
                    } else text = info[key] && info[key] !== 'null' ? info[key] : emptyText;
                    return (
                        <div className={cass(s.infoItem, { [s.infoItem2]: col === 2 })} key={key}>
                            <div>{v.displayname}</div>
                            <div>{text}</div>
                        </div>
                    )
                })
            }
        </div>
    )
}

function renderTaskItem({ currentStage = {}, col, onClick, onRightClick }) {
    const tasks = currentStage.tasks;
    if (!tasks || !tasks.length) return renderEmpty('暂无任务');
    return (
        <div className={s.task}>
            {
                tasks.map((v, i) => (
                    <div className={cass(s.taskItem, { [s.taskItem2]: col === 2 })} key={`taskItem${i}`} onClick={onClick ? () => onClick(v) : null}>
                        <TaskItem
                            data={v}
                            onRightClick={(v.ismanager || v.ishost) && onRightClick ? onRightClick : null}
                        />
                    </div>
                ))
            }
        </div>
    )
}

function renderTeamItem({ currentStage = {} }) {

    const members = currentStage.members || [];
    if (!currentStage.info) return;
    const clienMembers = currentStage.info.client[0].members;
    const members1 = [];
    const members2 = [];
    clienMembers.forEach(v => {
        if (v.innergrouptype === 1) members1.push(v);
        else members2.push(v)
    })
    const teams = [
        {
            ...currentStage.clientchatgroups[0],
            groups: [
                { name: '委托人组', members: members1 },
                { name: '律师代理组', members: members2 }
            ]
        },
        {
            ...currentStage.lawyerchatgroups[0],
            groups: [{ name: '', members }]
        }
    ]
    if (!members.length) teams.pop();
    return (
        <div className={s.team}>
            {teams.map(t => (
                <div key={t.groupid} className={s.teamItem}>
                    <h3>{t.groupname}</h3>
                    {t.groups.map(g => (
                        <div key={Math.random()} className={s.gItem}>
                            <div>{g.name}</div>
                            <MemberList
                                members={g.members}
                                hasBtn={false}
                            />
                        </div>
                    ))}
                </div>
            ))}
        </div>
    )

}

export { renderEmpty, renderInfoItem, renderTaskItem, renderTeamItem }